<template>
    <div class="relate-time-wrap">
        <a-form ref="ruleFormRef" layout="inline" :model="form" :rules="rules">
            <h-section collapse title="研发阶段" style="width: 100%">
                <a-row :gutter="24">
                    <a-col :span="9">
                        <a-form-item label="研发计划开始时间">
                            <div style="width: 100%">
                                <!-- 自研-->
                                <span v-if="isSelfInnovate || disabled">{{ $filters.dateFilter(form.randdPlanStartTime) }}</span>
                                <h-date-picker-cell :allowClear="false" v-model:value="form.randdPlanStartTime" :disabledDate="false" v-else />
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="9">
                        <a-form-item label="研发计划完成时间" name="randdPlanEndTime">
                            <div style="width: 100%">
                                <span v-if="disabled">{{ $filters.dateFilter(form.randdPlanEndTime) }}</span>
                                <h-date-picker-cell :allowClear="false" v-model:value="form.randdPlanEndTime" :disabledDate="false" v-else />
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="9">
                        <a-form-item label="研发实际开始时间">
                            <div style="width: 100%">
                                <span v-if="disabled">{{ $filters.dateFilter(form.randdRealStartTime) }}</span>
                                <h-date-picker-cell v-model:value="form.randdRealStartTime" :disabledDate="false" v-else />
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="9">
                        <a-form-item label="研发实际完成时间">
                            <div style="width: 100%">
                                <span v-if="disabled">{{ $filters.dateFilter(form.randdRealEndTime) }}</span>
                                <h-date-picker-cell v-model:value="form.randdRealEndTime" :disabledDate="false" v-else />
                            </div>
                        </a-form-item>
                    </a-col>
                </a-row>
            </h-section>

            <h-section collapse title="测试阶段" style="width: 100%">
                <a-row :gutter="24">
                    <a-col :span="9">
                        <a-form-item label="初次提测时间">
                            <div style="width: 100%">
                                <span>{{ $filters.dateFilter(form.autoTestTime) }}</span>
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="9">
                        <a-form-item label="提测次数">
                            <div style="width: 100%">
                                <span>{{ form.autoTestCount }}</span>
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="9">
                        <a-form-item label="测试计划开始时间" name="testPlanStartTime">
                            <div style="width: 100%">
                                <span v-if="disabled">{{ $filters.dateFilter(form.testPlanStartTime) }}</span>
                                <h-date-picker-cell :allowClear="false" v-model:value="form.testPlanStartTime" :disabledDate="false" v-else />
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="9">
                        <a-form-item label="测试计划完成时间">
                            <div style="width: 100%">
                                <span v-if="isSelfInnovate || disabled">{{ $filters.dateFilter(form.testPlanEndTime) }}</span>
                                <h-date-picker-cell :allowClear="false" v-model:value="form.testPlanEndTime" :disabledDate="false" v-else />
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="9">
                        <a-form-item label="测试实际开始时间">
                            <div style="width: 100%">
                                <span v-if="disabled">{{ $filters.dateFilter(form.testRealStartTime) }}</span>
                                <h-date-picker-cell :allowClear="false" v-model:value="form.testRealStartTime" :disabledDate="false" v-else />
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="9">
                        <a-form-item label="测试实际完成时间">
                            <div style="width: 100%">
                                <span v-if="disabled">{{ $filters.dateFilter(form.testRealEndTime) }}</span>
                                <h-date-picker-cell :allowClear="false" v-model:value="form.testRealEndTime" :disabledDate="false" v-else />
                            </div>
                        </a-form-item>
                    </a-col>
                </a-row>
            </h-section>

            <h-section collapse title="运维上线" style="width: 100%">
                <a-row :gutter="24">
                    <a-col :span="9">
                        <a-form-item label="交付运维时间">
                            <div style="width: 100%">
                                <span v-if="disabled">{{ $filters.dateFilter(form.deliveryTime) }}</span>
                                <h-date-picker-cell :allowClear="false" v-model:value="form.deliveryTime" :disabledDate="false" v-else />
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="9">
                        <a-form-item label="计划上线时间">
                            <div style="width: 100%">
                                <span>{{ $filters.dateFilter(form.expectTime) }}</span>
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="9">
                        <a-form-item label="实际上线时间" name="onlineRealTime">
                            <div style="width: 100%">
                                <span v-if="disabled">{{ $filters.dateFilter(form.onlineRealTime) }}</span>
                                <h-date-picker-cell :allowClear="false" v-model:value="form.onlineRealTime" :disabledDate="false" v-else />
                            </div>
                        </a-form-item>
                    </a-col>
                </a-row>
            </h-section>
        </a-form>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { message } from 'ant-design-vue/es';
import { HDatePickerCell } from '@/components';
import { debounce, deepClone } from '@/utils/util';
import { defineComponent, reactive, toRefs, computed, watch, ref, unref, nextTick } from 'vue';
export default defineComponent({
    components: {
        HDatePickerCell
    },
    props: {
        detail: { type: Object, default: () => ({}) },
        disabled: { type: Boolean, default: false },
        stepStatus: { type: String, default: '' }
    },
    emits: ['save'],
    setup(props, { emit }) {
        const ruleFormRef = ref<any>();
        const state = reactive<any>({
            form: {
                randdPlanStartTime: '',
                randdPlanEndTime: '',
                randdRealStartTime: '',
                randdRealEndTime: '',
                testPlanStartTime: '',
                testPlanEndTime: '',
                testRealStartTime: '',
                testRealEndTime: '',
                autoTestTime: '',
                autoTestCount: '',
                deliveryTime: '',
                expectTime: '',
                onlineRealTime: '',
                onlineTime: ''
            },
            oldData: {} // 保存一份旧数据
        });
        // 自研
        const isSelfInnovate = computed(() => {
            return props.detail.processType === '2';
        });
        const rules = computed(() => {
            let rules: any = {};
            if (props.detail.status === '1') {
                rules = {
                    randdPlanEndTime: [{ required: true, message: '研发计划完成时间不能为空', trigger: 'change' }],
                    testPlanStartTime: [{ required: true, message: '测试计划开始时间不能为空', trigger: 'change' }]
                };
            }
            if (props.stepStatus === 'requireOnline' && !props.disabled) {
                rules = { onlineRealTime: [{ required: true, message: '实际上线时间不能为空', trigger: 'change' }] };
            }
            return rules;
        });
        const handleSave = () => {
            state.oldData = deepClone(state.form);
            emit('save', 7);
        };
        const handleDebounceSave = debounce(handleSave, 300);
        const validate = () => {
            return new Promise((resolve) => {
                unref(ruleFormRef)
                    ?.validate()
                    .then(
                        () => {
                            resolve({
                                res: true,
                                errorMsg: null
                            });
                        },
                        () => {
                            setTimeout(() => {
                                const parentDom = document.getElementsByClassName('relate-time-wrap')[0];
                                const doms = parentDom.getElementsByClassName('ant-form-item-has-error');
                                const dom = doms[0];
                                dom.scrollIntoView({ block: 'end', inline: 'nearest' });
                            }, 100);
                            resolve({
                                res: false,
                                errorMsg: props.stepStatus === 'requireOnline' ? '实际上线时间不能为空' : '请填写必填时间'
                            });
                        }
                    );
            });
        };
        // 获取工单
        const getWorkList = async () => {
            const query = {
                versionId: props.detail.id
            };
            const { success, moule, errorMsg } = await api.changeOrderModel.getOrderDataByVersionId(query);
            if (success) {
                const firstList = moule.length ? moule.slice(0, 1) : [];
                if (firstList && firstList.length) {
                    // 获取实际上线时间
                    if (firstList[0].orderResultTime) {
                        state.form.onlineRealTime = firstList[0].orderResultTime + ':00';
                    }
                }
            } else {
                message.error(errorMsg);
            }
        };
        const init = () => {
            Object.keys(state.form).forEach((key) => {
                state.form[key] = props.detail[key];
            });
            state.oldData = deepClone(state.form);
            getWorkList();
        };
        init();
        watch(
            () => props.detail,
            () => {
                init();
            },
            { deep: true }
        );
        watch(
            () => state.form,
            (n) => {
                nextTick(() => {
                    if (JSON.stringify(state.oldData) !== JSON.stringify(n)) {
                        handleDebounceSave();
                    }
                });
            },
            { deep: true }
        );
        return {
            ruleFormRef,
            ...toRefs(state),
            isSelfInnovate,
            handleSave,
            rules,
            validate
        };
    }
});
</script>

<style scoped lang="less">
@import '../RelateProcess/CheckProcess/styles/index.less';
::v-deep(.ant-form-inline) {
    .ant-form-item {
        // 左侧label
        &-label {
            min-width: 130px !important;
            & > label {
                color: @caption-font-color !important;
            }
        }
    }
}
</style>